<template>
    <j-modal
      :width="modalWidth"
      :visible="visible"
      :title="title"
      switchFullscreen
      @ok="handleSubmit"
      @cancel="close"
      style="top: 50px"
      cancelText="关闭"
    >
      <a-card :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="24">
              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <a-form-item label="编号">
                  <j-input placeholder="请输入编号" v-model="queryParam.code"></j-input>
                </a-form-item>
              </a-col>
              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <a-form-item label="姓名">
                  <j-input placeholder="请输入姓名" v-model="queryParam.name"></j-input>
                </a-form-item>
              </a-col>
              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                  <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                  <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
                </span>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
          <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
          <a style="font-weight: 600">{{ selectedRowKeys.length }}</a
          >项
          <a style="margin-left: 24px" @click="onClearSelected">清空</a>
        </div>
        <div>
          <a-table
            ref="table"
            size="middle"
            :scroll="{ x: true }"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type: checkval }"
            class="j-table-force-nowrap1"
            @change="handleTableChange"
            :customRow="customClick"
          >
            <template slot="htmlSlot" slot-scope="text">
              <div v-html="text"></div>
            </template>
            <template slot="imgSlot" slot-scope="text, record">
              <span v-if="!text" style="font-size: 12px; font-style: italic">无图片</span>
              <img
                v-else
                :src="getImgView(text)"
                :preview="record.id"
                height="25px"
                alt=""
                style="max-width: 80px; font-size: 12px; font-style: italic"
              />
            </template>
            <template slot="fileSlot" slot-scope="text">
              <span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span>
              <a-button v-else :ghost="true" type="primary" icon="download" size="small" @click="downloadFile(text)">
                下载
              </a-button>
            </template>
          </a-table>
        </div>
      </a-card>
    </j-modal>
  </template>
  
  <script>
  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { filterObj } from '@/utils/util'
  import { deleteAction, getAction, httpAction } from '@api/manage'
  
  export default {
    name: 'CustomerListModal',
    mixins: [JeecgListMixin, mixinDevice],
    components: {},
    props: {
      category: {
        type: String,
      },
      modalWidth: {
        type: Number,
        required: false,
        default: 1250,
      },
      checkval: {
        type: String,
        default: 'radio',
      },
      supplierId: {
        type: String,
        required: false,
      },
    },
    data() {
      return {
        visible: false,
        title: '选择客户',
        description: '客户信息表',
        activeKey: 'on',
        ipagination: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '50'],
          showTotal: (total, range) => {
            return range[0] + '-' + range[1] + ' 共' + total + '条'
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0,
        },
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: function (t, r, index) {
              return parseInt(index) + 1
            },
          },
          {
            title:'客户编号',
            align:"center",
            dataIndex: 'code'
          },
          {
            title:'客户名称',
            align:"center",
            dataIndex: 'name'
          },
          {
            title:'客户简称',
            align:"center",
            dataIndex: 'simpleName'
          },
          {
            title:'客户分类',
            align:"center",
            dataIndex: 'cl_dictText'
          },
          {
            title:'国家',
            align:"center",
            dataIndex: 'countryId_dictText'
          },
          {
            title:'业务员',
            align:"center",
            dataIndex: 'salesman_dictText'
          },
          {
            title:'客户类别',
            align:"center",
            dataIndex: 'type_dictText'
          },
          {
            title:'客户类型',
            align:"center",
            dataIndex: 'category_dictText'
          },
          {
            title:'品牌',
            align:"center",
            dataIndex: 'brand'
          },
          {
            title:'联系人',
            align:"center",
            dataIndex: 'contact'
          },
          {
            title:'联系电话',
            align:"center",
            dataIndex: 'telephone'
          },
          {
            title:'地址',
            align:"center",
            dataIndex: 'address'
          },
          {
            title:'销售区域',
            align:"center",
            dataIndex: 'salesArea'
          },
          {
            title:'创建人',
            align:"center",
            dataIndex: 'createBy'
          },
          {
            title:'创建时间',
            align:"center",
            dataIndex: 'createTime'
          },
        ],
        url: {
          list: "/base/erpCustomer/list",
        },
        dictOptions: {},
        superFieldList: [],
      }
    },
    created() {
      this.loadData()
      this.getSuperFieldList()
    },
    computed: {
      importExcelUrl: function () {
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
      },
    },
    methods: {
      close() {
        this.queryParam = {}
        this.selectedRowKeys = []
        this.selectionRows = []
        this.visible = false
      },
      add() {
        this.showModal()
      },
      showModal() {
        this.dataSource = []
        this.visible = true
        this.loadData()
      },
      handleSubmit() {
        this.getSelectRows()
        // this.searchReset(false)
        this.queryParam = {}
        this.onClearSelected()
        this.close()
      },
      getSelectRows() {
        let selectedRow = null
        if (this.checkval == 'radio') {
          selectedRow = this.selectionRows[0]
        } else {
          selectedRow = this.selectionRows
        }
        //传递选中的数据
        this.$emit('selectFinished', selectedRow)
      },
      onSelectChange(selectedRowKeys, selectionRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectionRows = selectionRows
      },
      modalFormOk() {
        this.loadData()
      },
      loadData() {
        var params = this.getQueryParams()
        console.log(params, 'loadDATA')
        params.status = '1'
        this.loading = true
        getAction(this.url.list, params)
          .then((res) => {
            if (res.success) {
              //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
              this.dataSource = res.result.records || res.result
              if (res.result.total) {
                this.ipagination.total = res.result.total
              } else {
                this.ipagination.total = 0
              }
              //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
            } else {
              this.$message.warning(res.message)
            }
          })
          .finally(() => {
            this.loading = false
          })
      },
      initDictConfig() {},
      getSuperFieldList() {
        let fieldList=[];
        fieldList.push({type:'string',value:'name',text:'客户名称',dictCode:''})
        fieldList.push({type:'string',value:'simpleName',text:'简称',dictCode:''})
        fieldList.push({type:'string',value:'contact',text:'联系人',dictCode:''})
        fieldList.push({type:'string',value:'telephone',text:'联系电话',dictCode:''})
        fieldList.push({type:'int',value:'status',text:'状态',dictCode:'erp_status'})
        fieldList.push({type:'string',value:'cl',text:'客户分类',dictCode:"erp_customer_cl,name,id"})
        fieldList.push({type:'string',value:'type',text:'客户类别',dictCode:"erp_customer_type,name,id"})
        fieldList.push({type:'string',value:'category',text:'客户类型',dictCode:"erp_customer_category,name,id"})
        fieldList.push({type:'string',value:'brand',text:'品牌',dictCode:"erp_brand,name,id"})
        fieldList.push({type:'string',value:'countryId',text:'国家',dictCode:'country'})
        fieldList.push({type:'string',value:'continent',text:'所属洲',dictCode:''})
        fieldList.push({type:'string',value:'salesArea',text:'销售区域',dictCode:''})
        fieldList.push({type:'date',value:'deDate',text:'开发时间'})
        fieldList.push({type:'string',value:'address',text:'地址',dictCode:''})
        fieldList.push({type:'sel_user',value:'salesman',text:'业务员'})
        fieldList.push({type:'string',value:'createBy',text:'创建人',dictCode:''})
        fieldList.push({type:'date',value:'createTime',text:'创建时间',dictCode:''})
        this.superFieldList = fieldList
      },
      customClick(record) {
        var that = this;
        return {
          on: {
            dblclick: () => {
              that.$emit('selectFinished', record)
              that.queryParam = {}
              that.onClearSelected()
              that.close()
            },
          },
        }
      },
    },
  }
  </script>
  <style scoped>
  @import '~@assets/less/common.less';
  </style>
  